<template>
  <div class="main">
    <div class="title">
      <div class="blue"></div>
      <div class="name">水质污染TOP5</div>
    </div>
    <div class="seniority">
      <ul>
        <li v-for="(item, index) in seniorityData" :key="index">
          <span class="sort">{{ index + 1 }}</span>
          <span :class="['degree-box', getDegreeClass(item.degree)]">{{ item.degree }}</span>
          <span>{{ item.city }}</span>
          <span>{{ item.district }}</span>
          <span>{{ item.pollutionLevel }}</span>
          <span>{{ item.distance }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seniorityData: [
        { degree: '严重', city: '北京市', district: '房山区', pollutionLevel: '重度污染', distance: '15公里' },
        { degree: '严重', city: '上海市', district: '闵行区', pollutionLevel: '重度污染', distance: '10公里' },
        { degree: '中度', city: '北京市', district: '朝阳区', pollutionLevel: '中度污染', distance: '9.3公里' },
        { degree: '中度', city: '广东省', district: '广州市', pollutionLevel: '中度污染', distance: '8.6公里' },
        { degree: '轻度', city: '浙江省', district: '杭州市', pollutionLevel: '轻度污染', distance: '6.6公里' },
      ],
    };
  },
  methods: {
    getDegreeClass(degree) {
      if (degree === '严重') {
        return 'degree-severe';
      } else if (degree === '中度') {
        return 'degree-moderate';
      } else if (degree === '轻度') {
        return 'degree-light';
      }
      return '';
    },
  },
};
</script>

<style scoped>
.main {
  height: 30vh;
  width: 25%;
  min-width: 300px; /* 新增最小宽度限制 */
  background-color: #0d2b55;
  position: absolute;
  right: 1%;       /* 百分比单位更适配不同分辨率 */
  top: 8vh;
  margin-top: 5px;
}

.main .title {
  height: 11%;
  width: 100%;
  margin-top: 5px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blue {
  background-color: #2997e4;
  width: 1%;
  height: 25px;
}

.name {
  flex: 1;
  font-size: 17px;
  color: white;
}

.seniority {
  height: calc(100% - 40px);
  /* 移除 overflow-y: auto */
}

.seniority ul li {
  list-style: none;
  padding-left: 0;
  color: white;
  margin: 15px 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 15px;
  align-items: center;
}

.seniority u          l li span {
  font-size: 14px;        /* 缩小字号 */
  margin-right: 0;        /* 移除固定右边距 */
  white-space: nowrap;    /* 防止文字换行 */
  cursor: pointer;
}

.seniority ul li span.sort {
  color: #eb6841;
  font-size: 20px;
}

.degree-box {
  padding: 5px 10px;
  border-radius: 5px;
}

.degree-severe {
  background-color: #d89346;
}

.degree-moderate {
  background-color: #1db5ea;
}

.degree-light {
  background-color: #16f892;
}
</style>
